// 定义变量  variables.scss
$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #bbcfbf !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;


$primary:       $blue !default;
$secondary:     $indigo !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $teal !default;
$dark:          $cyan!default;

// 主题颜色库
$theme-colors:(
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
);


// mixin 公用    mixin.scss
@mixin button-variant($background, $border, $hover-background:red, $hover-border:red) {
    background: $background;
    border:1px solid $border;
    &:hover{
        background: $hover-background;
        border:1px solid $hover-border;
    }
}


// 去调用  btn.scss
@each $color, $value in $theme-colors {
    .btn-#{$color} {
      @include button-variant($primary, $primary);
    }
}


  
